<template>
  <div class="orderBox">
    <div>
      <span>订单号：</span>
      <el-input v-model="keyWord" clearable style="width:300px;" @keyup.enter.native="handleFilter"/>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">检索</el-button>
      <el-button size="medium" type="info" @click="clearParams">清空</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="selectRadio" size="medium" @change="handleFilter">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="cancelled">已取消</el-radio-button>
        <el-radio-button label="paid">已付款</el-radio-button>
        <el-radio-button label="created">未付款</el-radio-button>
        <el-radio-button label="refunding">申请退款</el-radio-button>
        <el-radio-button label="refunded">已退款</el-radio-button>
      </el-radio-group>
    </div>
    <el-table
      :data="orderTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      border
      style="width: 100%;margin-top: 20px;text-align:center;"
    >
      <el-table-column prop="id" label="编号" align="center" width="80"/>
      <el-table-column prop="sn" label="订单号	" align="center" width="200"/>
      <el-table-column prop="targetName" label="商品名称	" align="center" width="180"/>
      <el-table-column prop="amount" label="金额" align="center"/>
      <el-table-column prop="openId" label="买家微信openId" align="center"/>
      <el-table-column prop="targetType" label="订单类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.targetType | targetTypeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="订单状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status | statusFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="memo" label="备注" align="center"/>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-view" size="mini" @click="examine(scope)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin:20px 0;">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        :total="orderTableData.length"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <!-- 查看弹框 -->
    <el-dialog :visible.sync="examineDialog" title="订单信息" width="50%">
      <div class="examineList">
        <ul>
          <li>订单号</li>
          <li>{{ orderDetail.sn }}</li>
          <li>买家微信openId</li>
          <li>{{ orderDetail.openId }}</li>
          <li>订单类型</li>
          <li>{{ orderDetail.targetType | targetTypeFilter }}</li>
          <li>订单总额</li>
          <li>{{ orderDetail.totalPrice }}</li>
          <li>商品名称</li>
          <li>{{ orderDetail.targetName }}</li>
          <li>数量</li>
          <li>1</li>
          <li>商品单价</li>
          <li>{{ orderDetail.totalPrice }}</li>
          <li>订单备注</li>
          <li>{{ orderDetail.memo }}</li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="examineDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getTenantId} from '@/utils/auth'
  import {getActivityOrders} from '@/api/tinysale/addActivity'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          all: '全部',
          cancelled: '已取消',
          paid: '已付款',
          created: '未付款',
          refunding: '申请退款',
          refunded: '已退款'
        };
        return statusMap[status]
      },
      targetTypeFilter(type) {
        const typeMap = {
          cutPrice: '帮砍价',
          groupPurchase: '多人拼团',
          quickSell: '秒杀'
        };
        return typeMap[type]
      }
    },
    data() {
      return {
        keyWord: '',
        selectRadio: 'all',
        orderDetail: '',
        examineDialog: false,
        // 表格数据
        orderTableData: [],
        filterTableData: [],
        // 分页数据
        currentPage: 1,
        pageSize: 5
      }
    },
    created() {
      this.getTableData()
    },
    methods: {
      getTableData() {
        getActivityOrders(getTenantId()).then(res => {
          this.filterTableData = res.data.items;
          if ('all' === this.selectRadio) {
            this.orderTableData = this.filterTableData
          } else {
            this.orderTableData = this.filterTableData.filter(item => {
              if (item.status === this.selectRadio) return true
            })
          }
        })
      },
      handleFilter() {
        this.orderTableData = this.filterTableData.filter(item => {
          if (this.keyWord && item.sn.toLowerCase().indexOf(this.keyWord.toLowerCase()) === -1) return false;
          return true
        })
      },
      clearParams() {
        this.keyWord = '';
        this.getTableData()
      },
      // 查看按钮弹框
      examine(scope) {
        this.orderDetail = Object.assign({}, scope.row);
        this.examineDialog = true
      },
      // 分页设置
      handleCurrentChange(arg) {
        this.currentPage = arg
      },
      handleSizeChange(arg) {
        this.pageSize = arg
      }
    }
  }
</script>
<style lang="scss" scoped>
  .orderBox {
    padding: 20px;
  }

  .examineList {
    ul {
      // border: 1px solid #eee;
      // padding: 10px;
      overflow: hidden;

      li {
        padding: 0;
        margin: 0;
        list-style: none;
        float: left;
        width: 16%;
        height: 44px;
        box-sizing: border-box;
        border: 1px solid #fff;
        // margin-bottom: 5px;
      }

      li:nth-child(odd) {
        background-color: rgb(134, 187, 231);
        text-align: center;
        line-height: 20px;
      }

      li:nth-child(even) {
        background-color: rgb(203, 217, 228);
        padding-top: 13px;
        line-height: 14px;
      }
    }
  }
</style>

